<template>
    <div class="user-management">
        <a-card :bordered="false" :bodyStyle="{padding: 0}">
            <!-- 操作按钮区域 -->
            <div class="ant-pro-table-toolbar">
                <div class="ant-pro-table-toolbar-title">组织架构</div>
                <div class="ant-pro-table-toolbar-option">
                <!-- <a-button v-has="'sys:organization:add'" type="primary" icon="plus" @click="handleAdd()">新建</a-button> -->
                </div>
            </div>

            <!--数据表格区域-->
            <div class="ant-pro-table-wrapper">
                <a-table
                    ref="table"
                    size="middle"
                    :rowKey="rowKey"
                    :columns="columns"
                    :dataSource="dataSource"
                    :loading="loading"
                    @change="handleTableChange"
                >
                <template slot="expandIcon">
                    <a-icon type="caret-down"/>
                </template>

                <template slot="action-slot" slot-scope="text, record">
                <!-- <template #action-slot="text, record"> -->
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm 
                                title="确认要删除吗？"
                                @confirm="() => handleDelete(record)">
                    <a href="javascript:">删除</a>
                    </a-popconfirm>
                </template>
                </a-table>
            </div>
        </a-card>

        <!--表单页面-->
        <form-modal ref="formModal"></form-modal>
    </div>    
</template>

<script>
import FormModal from './OrganizationModal'
import { tablePageMixin } from "@/mixins/";

export default {
    components: { FormModal },
    name:'deptManagement',
    mixins: [tablePageMixin],
    data(){
        return{
            columns:[
                {
                    title: "组织架构",
                    dataIndex: "orgName",
                    align: "center",
                },
                {
                    title: "排序",
                    dataIndex: "sortNo",
                    align: "center",
                },
                {
                    title: "描述信息",
                    dataIndex: "desc",
                    align: "center",
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    align: "center",
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    width: '150px',
                    scopedSlots: { customRender: 'action-slot' }
                }
            ],
            dataSource:undefined
        }

    },
    created() {
        this.getDataUrl = "/rapid/org/getOrgTree";
        this.searchKey = "org";
        this.loadData();
    },
    computed:{
    },
    methods:{
        //删除
        handleDelete(record){
            const data ={
                ...record,
            }
            this.$http('rapid/org/deleteOrg',data).then(res =>{
                if(res.code === 200){
                    this.$message.success("删除成功")
                }
            })
        },
        //编辑
        handleEdit(record){
            this.$refs.formModal.update(record);
        },
        //新增
        handleAdd () {
            this.$refs.formModal.add();
        }
    }


}
</script>

<style scoped lang="less">
.user-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}

.expandIcon {
  margin-right: 8px
}

.leafNode {
  padding-left: 14px;
}
</style>
